<script setup lang="ts">
import { watch } from 'vue'
import { MapUtilList } from './MapContainer.ts'
import LeafletMap from './components/LeafletMap/LeafletMap.vue'
import OpenlayersMap from './components/OpenlayersMap/OpenlayersMap.vue'
import MapboxMap from './components/MapboxMap/MapboxMap.vue'
import CesiumViewer from './components/CesiumViewer/CesiumViewer.vue'
import OpenlayersMapStore from './components/OpenlayersMap/utils/OpenlayersMapStore.ts'
import OpenlayersMapUtil from './components/OpenlayersMap/utils/OpenlayersMapUtil.ts'
import MapboxMapUtil from './components/MapboxMap/utils/MapboxMapUtil.ts'
import MapboxMapStore from './components/MapboxMap/utils/MapboxMapStore.ts'
import type MapUtil from './components/utils/MapUtil.ts'
import type { GeoView } from './components/type/GeoType'
import { MapContainerType } from './components/Constant/MapContainerType.ts'
import LeafletMapStore from './components/LeafletMap/utils/LeafletMapStore.ts'
import LeafletMapUtil from './components/LeafletMap/utils/LeafletMapUtil.ts'
import CesiumViewerStore from './components/CesiumViewer/utils/CesiumViewerStore.ts'
import CesiumViewerUtil from './components/CesiumViewer/utils/CesiumViewerUtil.ts'
import ToolBox from './UiComponents/ToolBox/ToolBox.vue'
import MapOperate from './UiComponents/MapOperate/MapOperate.vue'
import MapInfo from './UiComponents/MapInfo/MapInfo.vue'
// 地图信息
import mapInfoCom from './js/MapInfoCom.ts'
// 地图工具箱
import mapToolBoxCom from './js/MapToolBoxCom.ts'

const props = defineProps({
    // 地图容器的类型
    mapContainerType: {
        type: String,
        default: MapContainerType.OpenlayersMap,
    },
})
const emits = defineEmits(['init'])

// 当前显示的地图的操作工具
let currentMapUtil: MapUtil<object> | undefined
// 存储地图工具列表
let mapUtilList: MapUtilList = {}
let mapViewPoint: GeoView | undefined

// 监听地图类型修改
watch(() => props.mapContainerType, (newType) => {
    // console.log('切换地图啦。。。', props.mapContainerType)
    // currentMapUtil = getMapUtil(oldType)
    if (!currentMapUtil) {
        return
    }

    // 从旧的地图中获取到地图范围
    mapViewPoint = currentMapUtil?.getMapView()

    // 获取到新的地图操作工具，定位到视角
    let newMapUtil: MapUtil<object> | undefined
    if (mapUtilList.hasOwnProperty(newType)) {
        newMapUtil = mapUtilList[newType]
    } else {
        newMapUtil = getMapUtil(newType)
    }
    // 获取得到要切换过去的地图：因为在第一次地图切换过去时是获取不到的
    if (!newMapUtil) {
        return
    }
    mapViewPoint && newMapUtil?.flyToView(mapViewPoint)
    currentMapUtil = newMapUtil // 更新当前操作的地图
})

/**
 * 地图初始化完成
 * @param {string} mapType
 */
const onMapInit = (mapType: string) => {
    console.log('地图初始化完成：', mapType)
    // 第一次地图初始化，无需定位到新地图
    if (!currentMapUtil) {
        currentMapUtil = getMapUtil(props.mapContainerType)
        return
    }
    // 从旧的地图中获取到地图范围
    mapViewPoint = currentMapUtil?.getMapView()
    // console.log('mapViewPoint', mapViewPoint)

    // 获取到新的地图操作工具，定位到视角
    currentMapUtil = getMapUtil(props.mapContainerType)
    mapViewPoint && currentMapUtil?.flyToView(mapViewPoint)
    emits('init', mapType)
}

/**
 * 获取到地图工具
 * @param {string} mapType
 */
const getMapUtil = (mapType: string) => {
    console.log('mapType', mapType)
    switch (mapType) {
        case MapContainerType.LeafletMap:
            if (!LeafletMapStore.getMap()) {
                return
            }
            return new LeafletMapUtil(LeafletMapStore.getMap())
        case MapContainerType.OpenlayersMap:
            if (!OpenlayersMapStore.getMap()) {
                return
            }
            return new OpenlayersMapUtil(OpenlayersMapStore.getMap())
        case MapContainerType.MapboxMap:
            if (!MapboxMapStore.getMap()) {
                return
            }
            return new MapboxMapUtil(MapboxMapStore.getMap())
        case MapContainerType.CesiumViewer:
            if (!CesiumViewerStore.getMap()) {
                return
            }
            return new CesiumViewerUtil(CesiumViewerStore.getMap())
    }
}

// 执行函数获取值
const { scale, center, drawingNumber, updatePosition } = mapInfoCom()
// 测试代码，后续修改为鼠标事件
setInterval(() => {
    // console.log('获取地图信息')
    if (!currentMapUtil) {
        return
    }
    const point3D = currentMapUtil.getMapView()
    // 更新获取地图信息
    updatePosition({
        scale: point3D.z * 100,
        center: point3D,
    })
}, 500)

// 地图工具
const { currentTool } = mapToolBoxCom()

</script>

<template>
    <div class="map-container">
        <!--地图-->
        <LeafletMap :show="mapContainerType === MapContainerType.LeafletMap" @init="onMapInit" />
        <OpenlayersMap :show="mapContainerType === MapContainerType.OpenlayersMap" @init="onMapInit" />
        <MapboxMap :show="mapContainerType === MapContainerType.MapboxMap" @init="onMapInit" />
        <CesiumViewer :show="mapContainerType === MapContainerType.CesiumViewer" @init="onMapInit" />

        <!--地图信息-->
        <!--<MapInfo :scale="scale" :center="center" :drawingNumber="drawingNumber" class="top-ui" />-->
        <MapInfo :="{scale, center, drawingNumber}" />
        <!--地图工具-->
        <ToolBox v-model:currentTool="currentTool" />
        <!--地图基础操作-->
        <MapOperate />

        <!--搜索面板-->
        <!--<SearchPanel />-->
    </div>
</template>

<style scoped>
@import './css/MapContainer.scss';
</style>
